<template>
  <div class="detailbox">
    <div class="headr">
      <b style="font-size: 24px;" v-if="showflag">添加</b>
      <b style="font-size: 24px;" v-if="!showflag">修改当前教师信息</b>
      <b style="font-size: 24px;" @click="back">返回</b>
    </div>
    <div class="teacherdetailForm">
      <el-form ref="formData" :model="formData" class="form" :rules="rules">
        <el-form-item label="姓名:" prop="teaName">
          <el-input v-model="formData.teaName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄:" prop="teaAge">
          <el-input v-model="formData.teaAge" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别:" prop="teaSex">
          <el-select v-model="formData.teaSex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式:" prop="teaPhone">
          <el-input v-model="formData.teaPhone" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="职称:" prop="teaTitle">
          <el-select v-model="formData.teaTitle" placeholder="请选择职称">
            <el-option :label="x.titleName" :value="x.titleId" v-for="x in titleList" :key="x.titleId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学科目:" prop="teasub">
          <!-- <el-select v-model="formData.teasub" placeholder="请选择教学科目" >
            <el-option :label="x.subName" :value="x.subId" v-for="x in subjectoptions" :key="x.value"></el-option>
          </el-select> -->
          <el-input placeholder="请选择教学科目" suffix-icon="el-icon-arrow-right" @click.native="show"  v-model="rolelist">
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="管理班级:" prop="teaClass">
          <el-select v-model="formData.teaClass" placeholder="请选择班级">
            <el-option :label="x.clazzName" :value="x.clazzId" v-for="(x,index) in classoptions" :key="index"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="权限:" prop="Role" v-if="showflag">
          <el-input placeholder="请选择权限" suffix-icon="el-icon-arrow-right" @click.native="showrole"  v-model="rolenames">
          </el-input>
        </el-form-item>
           <!-- 数字，字母 或者下划线 -->
        <el-form-item label="账号:" prop="accountNumber"  v-if="showflag">
          <el-input v-model="formData.accountNumber" placeholder="请输入账号"></el-input>
        </el-form-item>
        <!-- 6位数字 -->
        <el-form-item label="密码:" prop="pwd"  v-if="showflag">
          <el-input v-model.number="formData.pwd" placeholder="请输入密码" type="password" ></el-input>
        </el-form-item>
        <div class="btngroup">
          <button class="go btn" @click.prevent="createteacher('formData')" v-if="showflag">立即添加</button>
          <button class="go btn" @click.prevent="updateTeacher('formData')" v-if="!showflag">立即修改</button>
          <button class="cancel btn" @click="resetForm('formData')">取消</button>
        </div>
      </el-form>
      <el-dialog
					title="请选择教学科目"
					:visible.sync="dialogFormVisible"
					width="30%"
					center>
            <template>
              <el-checkbox-group v-model="checkList2">
                <el-checkbox label="无" value="">无</el-checkbox>
                <el-checkbox :label="x.subName" v-for="(x,index) in subjectoptions" :value="x.subId" :key="index">{{ x.subName }}</el-checkbox> 
              </el-checkbox-group>     
            </template>
					<span slot="footer" class="dialog-footer" >
            <el-button type="primary" @click="addrole">确 定</el-button>
						<el-button @click="dialogFormVisible = false">取 消</el-button>
					</span>
				</el-dialog>
        <el-dialog
					title="请选择权限"
					:visible.sync="dialogRole"
					width="30%"
					center>
            <template>
              <el-checkbox-group v-model="Rolelists">
                  <el-checkbox label="教师" disabled></el-checkbox>
                  <el-checkbox :label="x.roleName" v-for="(x,index) in RolelistsArrTwo" :value="x.roleId" :key="index">{{ x.roleName }}</el-checkbox> 
              </el-checkbox-group>     
            </template>
					<span slot="footer" class="dialog-footer" >
            <el-button type="primary" @click.native="addRoleName">确 定</el-button>
						<el-button @click.native="dialogRole = false">取 消</el-button>
					</span>
				</el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleIds:[],
      Rolelists:['教师'], //显示的权限
      rolenames:"", //权限名字
      RolelistsArr:[],//循环的权限
      RolelistsArrTwo:[],
      dialogRole:false,
      showflag: true,
      dialogFormVisible:false,
      baseUrl: require("../js/baseUrl.js").baseUrl,
      teaId: 0,
      checkList2:[],
      subjectoptions:[],
      // classoptions:[],
      titleList:[],
      rolelist:'',
      teaSubs:[],
      formData: {
        teaName: "",
        teaAge: "",
        teaSex: "",
        teaPhone: "",
        teaTitle: "",
        teasub: "",
        teaClass: "",
        accountNumber: "",
        pwd: ""
      },
      rules: {
        teaName: [
          { required: true, message: '请填写名字', trigger: 'blur' },
      
        ],
        teaAge: [
          { required: true, message: '请选择年龄', trigger: 'blur' },
          { pattern: /^\d{2}$/, message: '请输入两位数字', trigger: 'blur'  }
        ],
        teaSex: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        teaPhone: [
          { required: true, message: '请填写联系方式', trigger: 'blur' },
          { pattern: /^\d{11}$/, message: '请输入11位数字', trigger: 'blur'  }
        ],
        teaTitle: [
          { required: true, message: '请选择职称', trigger: 'blur' }
        ],
        teaClass: [
          { required: true, message: '请选择管理班级', trigger: 'blur' }
        ],
        accountNumber: [
          { required: true, message: '请输入值', trigger: 'blur'},
          { pattern: /^[a-zA-Z0-9_]+$/, message: '只能包含数字、字母和下划线', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入值', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入6位数字', trigger: 'blur'  }
         ]
      }
    }
  },
  methods: {
    findRoleName(){
      this.rolenames=""
      this.roleIds=[]
      this.RolelistsArr.forEach(v=>{
        if(this.Rolelists[0]==v.roleName){
          this.roleIds.push(v.roleId)
        }
      })
      this.RolelistsArr=this.RolelistsArr.filter(v=>v.roleName!="教师")
      for(var i=0;i<this.Rolelists.length;i++){
        if(i>0){
          this.rolenames=this.rolenames+" / "
        }

        this.rolenames=this.rolenames+this.Rolelists[i]
        this.RolelistsArr.forEach(v=>{
          if(this.Rolelists[i]==v.roleName){
            this.roleIds.push(v.roleId)
          }
        })
      }
    },
    //查询用户权限
    // /SchoolSys/role/findAll
    findRole(){
      this.$http.post(this.baseUrl+"SchoolSys/role/findAll",{
        status:1
      }).then(res=>{
        if(res.data.code==200){
          this.RolelistsArr=res.data.data
        }
      })
    },
    findRoleTwo(){
      this.$http.post(this.baseUrl+"SchoolSys/role/findAll",{
        status:0
      }).then(res=>{
        if(res.data.code==200){
          this.RolelistsArrTwo=res.data.data
        }
      })
    },
    addRoleName(){
      this.dialogRole=false
      //根据权限id查名字
      this.findRoleName()

    },
    //显示科目名字
    showSubName(){
      this.rolelist=""
      this.teaSubs=[]
      for(var i=0;i<this.checkList2.length;i++){
        if(i>0){
          this.rolelist=this.rolelist+" / "
        }
        this.rolelist=this.rolelist+this.checkList2[i]
        this.subjectoptions.forEach(v=>{
          if(this.checkList2[i]==v.subName){
            this.teaSubs.push(v.subId)
          }
        })
      }
    },
    addrole(){
      this.dialogFormVisible=false
      this.showSubName()
    },
    show(){
      this.dialogFormVisible=true
    },
    // 打开权限
    showrole(){
      this.dialogRole=true
    },
    back() {
      this.$router.push("/teachermanager")
    },
    //添加教师
    createteacher(formData) {
      if(this.roleIds.length==0){
        this.$message.error("请填写完整信息")
      }else{
        this.$refs[formData].validate((valid) => {
        if (valid) {
          this.addTea()
        }
        });
      }
    },
    //修改教师
    updateTeacher(formData){
      this.$refs[formData].validate((valid) => {
        if (valid) {
          // /SchoolSys/upTea
          this.setupTea()
        } else {
          this.$message.error("请填写全部信息")
          return false;
        }
      });
      },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
       //获得职称列表
    gettitleList(){
      this.$http.post(this.baseUrl+"SchoolSys/titleList",{

      }).then(res=>{
        if(res.data.code==200){
          this.titleList=res.data.data
        }
      })
    },
    //添加教师
    addTea(){
      this.$http.post(this.baseUrl+"SchoolSys/addTeacher",{ 
        teaName:this.formData.teaName,
        teaPhone:this.formData.teaPhone,
        teaSubs:this.teaSubs,
        teaSex:this.formData.teaSex,
        teaAge:Number(this.formData.teaAge),
        teaTitle:this.formData.teaTitle,
        teaPass:this.formData.pwd+"",
        teaUser:this.formData.accountNumber,
        roleIds:this.roleIds
      }).then(res=>{
        if(res.data.code==200){
          this.$message.success("添加成功")
            setTimeout(() => {
              this.$router.push("/teachermanager")
            }, 1000);
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },
    // 修改教师信息
    setupTea(){
        this.$http.post(this.baseUrl+"SchoolSys/updateTeacher",{
          teaId:Number(this.teaId),
          teaName:this.formData.teaName,
          teaPhone:this.formData.teaPhone,
          teaSubs:this.teaSubs,
          teaSex:this.formData.teaSex,
          teaAge:this.formData.teaAge,
          teaTitle:this.formData.teaTitle,
        }).then(res=>{
          if(res.data.code==200){
            this.$message.success("修改成功")
            setTimeout(() => {
              this.$router.push("/teachermanager/teachermanager2")
            }, 1000);
          }
        })
    },
    //获取已有科目
    getcourse() {
      this.$http.post(this.baseUrl + "SchoolSys/sub/find", {
      }).then(res => {
        this.subjectoptions = res.data.data
        
      })
    },
    // 根据id查对应的老师
    findteacherId() {
      this.$http.post(this.baseUrl + "SchoolSys/getTeacherById", {
        teaId: Number(this.teaId)
      }).then(res => {
          this.formData=res.data.data
          this.checkList2=res.data.data.subs
          let arr=this.checkList2;
          let newArr=[]
          arr.forEach(v=>{
            newArr.push(v.subName)
          })
          this.checkList2=[...newArr]
          this.showSubName()
      })
    },
  },

  mounted() {
    this.teaId = this.$route.query.teacherinfoid
    if (this.teaId  != undefined) {
      this.showflag = false
      this.findteacherId()
    }
    this.getcourse()
    this.gettitleList()
    this.findRole()
    this.findRoleTwo()
  }
}
</script>

<style lang="less"> 
.detailbox {
   padding: 40px;

   .headr {
     display: flex;
     justify-content: space-between;
   }

   .headr b {
     cursor: pointer;
   }

   .teacherdetailForm {
     margin-top: 30px;
   }

   .teacherdetailForm .el-form-item {
     width: 37%;
     display: flex;
     float: left;
   }
   .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
      content: '';

      margin-right: 0;
      }
   .el-form-item__label {
     width: 110px;
     text-align: left;
     font-size: 20px;
     color: #333;
   }

   .el-form-item__content,
   .el-select {
     width: 300px;
   }

   .btngroup {
     display: flex;
     position: absolute;
     bottom: 5%;

     .btn {
       padding: 16px 60px;
       border: none;
       border-radius: 4px;
       color: #fff;
       margin: 10px;
       cursor: pointer;
     }

     .go {
       background: #106ab1;
     }

     .cancel {
       background: #999;
     }
   }

 }
</style>